import { useState, useEffect } from "react";
import { TypingEffect } from './TypingEffect';
import { Skeleton, Form } from 'antd-mobile';
import { EyeOutline, KoubeiOutline } from 'antd-mobile-icons';
import "./Explain.css";

export function Explain({ data }) {
  const [currentSection, setCurrentSection] = useState(0);
  const [loading, setLoading] = useState(true);
  useEffect(() => {
    let timeout;
    function init() {
      setLoading(true);
      setCurrentSection(0);
      if (data?.status === 'success') {
        timeout = setTimeout(() => setLoading(false), 1000);
      }
    }
    init();
    return () => clearTimeout(timeout);
  }, [data?.status]);
  return (
    loading ?
      <>
        <Skeleton.Title animated />
        <Skeleton.Paragraph lineCount={8} animated />
      </>
      :
      <div className={"explain"}>
        <Form.Item
          label={loading ? "" : <>
            <EyeOutline color='#000' />&nbsp;
            <TypingEffect text={"解释"} start={currentSection === 0} speed={5} onComplete={() => setCurrentSection(1)} />
          </>}
        >
          <TypingEffect style={{ color: '#19556e', fontSize: '12px' }} text={data && data?.explain} start={currentSection === 1} speed={5} onComplete={() => setCurrentSection(2)} />
        </Form.Item>
        {
          currentSection > 1 && data?.advise && <Form.Item
            label={loading ? "" : <>
              <KoubeiOutline color='#000' />&nbsp;
              <TypingEffect text={"建议"} start={currentSection === 2} speed={5} onComplete={() => setCurrentSection(3)} />
            </>}
          >
            <TypingEffect style={{ color: '#19556e', fontSize: '12px' }} text={data && data.advise} start={currentSection === 3} speed={5} onComplete={() => setCurrentSection(4)} />
          </Form.Item>
        }
      </div>
  );
}
